<template>
	<view class="page">

		<custom-navigation title="出库详情">
		</custom-navigation>
		<view class="title-box">
			<view class="name">单据详情</view>
		</view>
		<view class="head-contaienr">
			<view class="item flex-row-center">
				<view class="value">单据编号：{{info.issue_no}}</view>
				<view :class="info.issue_state=='已提交'?'bluebtn':'redbtn'">{{info.issue_state}} </view>
			</view>
			<view class="item flex-row-center">
				<view class="value">制单时间：{{info.create_time}}</view>
			</view>
			<view v-if="info.issue_state=='已提交'" class="item flex-row-center">
				<view class="value">提交时间：{{info.modify_time}}</view>
			</view>
			<view class="item flex-row-center">
				<view class="value">备注：{{info.remark}}</view>
			</view>
		</view>

		<view class="title-box flex-row-center">
			<view class="name">商品明细</view>
			<view class="n1">共：{{datas.length}}种</view>
			<view class="n1" style="margin-left: 80rpx;">{{getAllQty()}}件商品</view>
		</view>
		<scroll-view class="body-scroll" scroll-y="true">
			<view class="item-view" v-for="(item,index) in datas">
				<view class="name">{{item.goods_name}}</view>
				<view class="flex-row-center" style="flex: 1;">
					<view style="flex: 1; margin: 4rpx 0;">{{item.goods_barcode}}</view>
					<view>出库数量：{{item.issue_num}}</view>

				</view>
				<view class="flex-row-center">
					<view style="flex: 1;margin: 4rpx 0;">出货价格：￥{{item.shipment_price}}</view>
					<view>出库金额：￥{{getAmount(item)* 1}}</view>

				</view>
			</view>

		</scroll-view>

		<view class="bottom-container flex-row-center" v-if="!isEdit&&info.issue_state!='已提交'">
			<view class="item" @click="settingMultiple(0)">删除</view>
			<view class="item" @click="settingMultiple(1)">编辑</view>
			<view class="item1" @click="settingMultiple(2)">提交</view>
		</view>
		<view v-else-if="isEdit" class="bottom-container flex-row-center">
			<view class="item" @click="settingMultiple(3)">保存草稿</view>
			<view class="item1" @click="settingMultiple(2)">提交</view>
		</view>

		<alert message="是否确定删除此出库单？" :show="delDialogShow" @leftAction="delDialogShow=false" @rightAction="del">
		</alert>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delDialogShow: false,
				info: {},
				datas: [],
				countQty: 0,
				isEdit: false
			}
		},
		onLoad(options) {
			this.info = JSON.parse(options.info)
			this.getData()
		},
		onShow() {
			if (uni.getStorageSync("refresh")) {
				this.getData()
				this.getInfo()
				uni.setStorageSync("refresh", null);
			}
		},
		methods: { 
			getAllQty() {
				let countQty = 0;
				for (let i in this.datas) {
					countQty += parseInt(this.datas[i].issue_num ?? '0')
				}
				return countQty;
			},
			getAmount(item) {
				return (item.shipment_price ?? 0) * (item.issue_num ?? 1)
			},
			settingMultiple(type) { //0 删除，1 编辑，2 提交
				if (type == 0) {
					this.delStock();
				} else if (type == 1) {
					// this.isEdit = true;
					let info = JSON.stringify(this.info)
					uni.navigateTo({
						url: '/pages/warehousing/bill-out-stock?info=' + info
					})
				} else if (type == 2) {
					this.save(1)
				} else if (type == 3) //修改
				{
					this.save(0)
				}
			},
			delStock() {
				this.delDialogShow = true;
			},
			
			del() {
				uni.showLoading({
					title: "删除中..."
				})
				this.$apiPost("/retail/operate/srvretail_issue_delete", [{
					"serviceName": "srvretail_issue_delete",
					"condition": [{
						"colName": "id",
						"ruleType": "in",
						"value": this.info.id
					}]
				}]).then(res => {
					uni.hideLoading()
					uni.setStorageSync("refresh", true)
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							mask: true
						})
			
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				}) 
			},
			save(type) { //type 0 保存草稿，1 提交。
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/operate/srvretail_issue_update", [{
					"serviceName": "srvretail_issue_update",
					"condition": [{
						"colName": "id",
						"ruleType": "eq",
						"value": this.info.id
					}],
					"data": [{
						"issue_state": "已提交"
					}]
				}]).then(res => {
					uni.hideLoading()
					uni.setStorageSync("refresh", true)
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							mask: true
						})
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})

			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/select/srvretail_issue_detail_select", {
					"serviceName": "srvretail_issue_detail_select",
					"colNames": ["*"],
					"condition": [{
						"colName": "issue_no",
						"ruleType": "eq",
						"value": this.info.issue_no
					}],
					"relation_condition": {},
					"page": {
						"pageNo": 1,
						"rownumber": 500
					}
				}).then(res => {
					uni.hideLoading()
					this.datas = res.data;
					this.countQty = 0;
					 
				})
			},
			
			
			getInfo() { 
				this.$apiPost("/retail/select/srvretail_issue_select", {
					"serviceName": "srvretail_issue_select",
					"colNames": ["*"],
					"condition": [{
						"colName": "id",
						"ruleType": "eq",
						"value": this.info.id
					}], 
					"page": {
						"pageNo": 1,
						"rownumber": 500
					}
				}).then(res => {
					  
					if(res.data.length>0){
						this.info=res.data[0]
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: white;
	}

	.title-box {
		width: 100%;
		height: 100rpx;
		background: rgba(211, 242, 234, 1);
		padding: 0 20rpx;

		.name {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 100rpx;
			color: rgba(51, 51, 51, 1);
			flex: 1;
		}

		.n1 {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 100rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.head-contaienr {
		.item {
			padding: 10rpx 24rpx;

			.value {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}
	}

	.item-view {
		margin: 26rpx 20rpx 0 24rpx;
		padding-bottom: 18rpx;
		border-bottom: 2rpx solid rgba(245, 245, 247, 1);
		;

		.name {
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);

		}

		view {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
	}

	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>
